import React from 'react';
// import logo from './logo.svg';
import './App.css';
import { bindActionCreators, Dispatch } from 'redux'
import { connect }from 'react-redux'

import { getEmployee } from './redux/employee'
import { getAppList } from './redux/apps'

interface Props {
  employeeList: any[] | undefined
  onGetEmployee: (param: any,callBack: () => void) => void

  appList: any[] | undefined
  onGetAppList: (param: any,callBack: () => void) => void
}

function App(props: Props) {
  console.log('props', props)
  const { onGetEmployee,
          employeeList,
          appList,
          onGetAppList
        } = props

  const handleClick = () => {
    console.log('handleClick')
    onGetEmployee("hello",() => {
      console.log('hideLoading')
    })
  }

  const handleGetAppList = () => {
    onGetAppList({id:123},() => {
      console.log('onGetAppList')
    })
  }
  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => handleClick()}>onGetEmployee</button>
        <button onClick={() => handleGetAppList()}>onGetAppList</button>
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        {
          employeeList && employeeList.map((item:any,index:number) => {
            return (<span key={index}>姓名:{item.name} 年龄: {item.age}</span>)
          } )
        }
        {
          appList && appList.map((item:any,index:number) => {
            return (<span key={index}>应用名:{item.appName}</span>)
          } )
        }
      </header>
    </div>
  );
}

const mapStateToProps = (state: any) => ({
  employeeList: state.employee.employeeList,
  appList: state.apps.appsList
})

const mapDispatchToProps = (dispath: Dispatch) => bindActionCreators({
  onGetEmployee: getEmployee,
  onGetAppList: getAppList
}, dispath)
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);
